import { Component } from "react";
import My from "./my/my"
import Hot from "./hot/hot"
import Cinemalist from "./cinemalist/cinemalist";
import style from "./nav.module.css"
import imageMy from "../asset/images/my.png";
import imageHot from "../asset/images/hot.png"
import imageList from "../asset/images/list.png"
export default class Nav extends Component {
    state = {
        index1: 0,
        list: [
            { id: 2, name: "热映", imgSrc: imageHot },
            { id: 0, name: "影院", imgSrc: imageList },
            { id: 1, name: "我的", imgSrc: imageMy }
        ]
    }
    render() {
        return (
            <>
                {this.witch()}
                <div className={style.ul}>
                    {this.state.list.map((item, index) =>
                        <div key={item.id} onClick={() => {
                            this.listHander(index)
                        }} className={`${this.state.index1 === index ? style.active : ""} ${style.li}`}>
                            <div>
                                <div><img src={item.imgSrc} className={style.img} alt='' /></div>
                                <div>{item.name}</div>
                            </div>
                        </div>
                    )}
                </div>
            </>
        )
    }
    listHander(index) {
        this.setState({
            index1: index
        })
    }
    witch() {
        switch (this.state.index1) {
            case 2:
                return <My></My>
            case 0:
                return <Hot></Hot>
            case 1:
                return <Cinemalist></Cinemalist>
        }
    }
}